<style scoped>
.mycss {
  background: red;
}

</style>
<template>
  <Card>
    <div>
      <Row style="text-align:left;">
        <Col span="12">
        <div style="display:flex;">
          <div style="flex: 0 0 80px;line-height:28px;"> 搜索条件： </div>
          <div style="flex:1;">
            <Input v-model="queryStr" placeholder="请输入内容" @on-enter="query(queryStr)">
            </Input>
          </div>
        </div>
        </Col>
      </Row>
      <Row style="padding:10px 0;">
        <Col span="12">
        <div style="display:flex;">
          <div style="flex: 0 0 80px;line-height:28px;"> 筛选条件： </div>
          <div style="flex:1;">
            <ButtonGroup>
              <Button type="primary" ghost @click="query('')">全部</Button>
              <Button type="primary" ghost @click="query('工厂')">工厂</Button>
              <Button type="primary" ghost @click="query('产量')">产量</Button>
              <Button type="primary" ghost @click="query('计划')">计划</Button>
            </ButtonGroup>
          </div>
        </div>
        </Col>
        <Col span="12" style="text-align:right;">
          <div style="display: inline-flex;width: 600px;" v-if="uploadFile !== null">
            <div style="flex: 5;text-align: right;padding-right: 10px;">
              <span style="font-size: 18px;">已选文件:  {{ uploadFile.name }}</span>
            </div>
            <div style="flex: 1;margin-top: 0px;">
              <Button type="success" @click="doUpload" :loading="upLoadingStatus">
                {{upLoadingStatus?'正在上传':'确认上传'}}
              </Button>
            </div>
          </div>
          <Upload style="display: inline-flex;" :before-upload="beforeDoUpload" action="" accept=".xlsx">
            <Button type="info" icon="ios-download-outline" :disabled="upLoadingStatus">选择导入</Button>
          </Upload>
        <Button type="success" icon="android-add-circle" @click="add()">新增</Button>
        <Button type="error" :disabled="deleteMoreDisabled" icon="android-add-circle" @click="delSome()">删除</Button>
        </Col>
      </Row>
      <div>
        <Table border :columns="columns7" :data="tableList" ref="table" @on-selection-change="tableCheckbox"></Table>
        <Spin size="large" fix v-if="spinShow"></Spin>
      </div>
      <Row style="text-align:right;padding:10px 0;" v-show="totalElements">
        <Page :total="totalElements" size="small" show-elevator :page-size="25" @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
      </Row>
    </div>
    <!-- 新增or编辑 -->
    <Modal v-model="modalObj.show" :title="modalObj.title" width="720" @on-cancel="cancel" @on-ok="ok" :scrollable="true">
      <DataEditForm @modalSuccess="modalSuccess" ref="refDataEditForm"></DataEditForm>
      <div slot="footer">
        <Button type="primary" ghost @click="modalObj.show=false">关闭</Button>
      </div>
    </Modal>
  </Card>
</template>
<script>
import DataEditForm from './DataEditForm.vue'
export default {
  components: { DataEditForm },
  data: function () {
    return {
      uploadFile: null,
      spinShow: true,
      tableCheckboxData: [],
      deleteMoreDisabled: true,
      upLoadingStatus: false,
      tableList: [],
      totalElements: null,
      pageIndex: 0,
      value13: '',
      modal1: false,
      modalObj: {
        show: false,
        title: ''
      },
      editOneData: {},
      columns7: [{
        type: 'selection',
        width: 60,
        align: 'center'
      }, {
        type: 'index',
        width: 60,
        align: 'center'
      }, {
        title: '工厂',
        key: 'factory',
        align: 'center'
      }, {
        title: '车间',
        key: 'workshop',
        align: 'center'
      }, {
        title: '年份',
        key: 'fyear',
        align: 'center'
      }, {
        title: '月份',
        key: 'fmonth',
        align: 'center'
      }, {
        title: '能源类型',
        key: 'etype',
        align: 'center'
      }, {
        title: '数据类型',
        key: 'ntype',
        align: 'center'
      }, {
        title: '数量',
        key: 'num',
        align: 'center'
      }, {
        title: '录入人',
        key: 'createUser',
        align: 'center'
      }, {
        title: '创建时间',
        key: 'createTime',
        align: 'center'
      }, {
        title: '操作',
        key: 'action',
        width: 150,
        align: 'center',
        render: (h, params) => {
          return h('div', [
            h('Button', {
              props: {
                // type: 'text',
                size: 'small'
              },
              style: {
                margin: '3px',
                color: '#2db7f5'
              },
              on: {
                click: () => {
                  let self = this
                  let config = {
                    title: '提示',
                    content: '您确定删除吗？',
                    onOk: function () {
                      // self.remove(params.index)
                      self.deleteOne(params.row.id)
                    }
                  }
                  this.$Modal.confirm(config)
                }
              }
            }, '删除'),
            h('Button', {
              props: {
                // type: 'text',
                size: 'small'
              },
              style: {
                margin: '3px',
                color: '#2db7f5'
              },
              on: {
                click: () => {
                  // console.log(params)
                  this.modalObj = {
                    show: true,
                    title: '编辑'
                  }
                  this.$refs.refDataEditForm.updateFormdata(params.row)
                }
              }
            }, '编辑')
          ])
        }
      }],
      factory_workshop_ntype_etype_plike: ''
    }
  },
  created: function () {
    // console.log('--created--')
    this.list()
  },
  mounted: function () {
    // console.log('--mounted--')
  },
  destroyed: function () {
    // console.log('--destroyed--')
  },
  methods: {
    show: function (index) {
      this.$Modal.info({
        title: '设备信息',
        content: `类型：${this.tableList[index].type}<br>型号e：${this.tableList[index].model}<br>编号${this.tableList[index].number}`
      })
    },
    remove: function (index) {
      this.tableList.splice(index, 1)
    },
    // tableCheckbox变化
    tableCheckbox: function (selection) {
      this.tableCheckboxData = []
      if (selection.length > 0) {
        this.deleteMoreDisabled = false
        this.tableCheckboxData = selection.map(item => item.id)
      } else {
        this.deleteMoreDisabled = true
        this.tableCheckboxData = []
      }
    },
    cancel: function () {
      // console.log('cancel')
    },
    ok: function () {
      // console.log('cancel')
    },
    beforeDoUpload: function (file) {
      this.uploadFile = file
      return false
    },
    doUpload: function () {
      if (this.uploadFile === null) {
        this.$Message.info('无法获上传的文件')
        return
      }
      let formData = new FormData()
      formData.append('file', this.uploadFile)
      this.upLoadingStatus = true
      window.myapi.upload('$quota/import', formData).then(resp => {
        if (resp.status === 200 && resp.data.status === 200) {
          this.$Notice.success({
            title: '操作提示',
            desc: '已成功上传' + resp.data.data + '条数据'
          })
          // 刷新数据
          this.list()
          this.uploadFile = null
        } else {
          this.$Notice.warning({
            title: '操作提示',
            desc: resp.data.msg
          })
        }
      }).catch(error => {
        this.$Notice.warning({
          title: '操作提示',
          desc: error
        })
      }).finally(() => {
        this.upLoadingStatus = false
      })
    },
    // 新增
    add: function () {
      this.modalObj = {
        show: true,
        title: '新增'
      }
      this.$refs.refDataEditForm.updateFormdata({})
    },
    // 删除
    delSome: function () {
      if (this.tableCheckboxData.length === 0) {
        this.$Message.warning('请选择数据再操作')
      } else {
        window.myapi.do_del('$quota/del', this.tableCheckboxData).then((res) => {
          if (res.data.status === 200) {
            this.$Notice.success({
              title: '删除数据成功!',
            })
            this.list()
          } else {
            this.$Notice.success({
              title: '操作提示',
              desc: res.data.msg
            })
          }
        }).catch(function (e) {
          let msg = e.response.data.message ? e.response.data.message : '删除数据失败!'
          self.$Message.error({duration: 0, closable: true, content: msg})
        })
      }
    },
    modalSuccess: function () {
      let self = this
      self.modalObj.show = false
      self.list()
    },
    // 数据list
    list: function () {
      let getData = {
        'size': 20,
        'page': this.pageIndex,
        'factory_workshop_ntype_etype_plike': this.queryStr
      }
      this.spinShow = true
      window.myapi.quota_list(getData).then((res) => {
        this.tableList = []
        if (res.status === 200) {
          this.tableList = res.data.data.content.reverse()
          this.totalElements = res.data.data.totalElements
        } else {
          let msg = res.msg ? res.msg : '请求数据失败!'
          this.$Message.error(msg)
        }
        this.spinShow = false
      }).catch(function (e) {
        this.tableList = []
        this.$Message.error('请求数据失败!')
        this.spinShow = false
      })
    },
    // 第几页
    pageChange: function (index) {
      console.log(index)
      let self = this
      self.pageIndex = index - 1
      self.list()
    },
    // 每页显示多少
    pageSizeChange: function (index) {
      console.log(index)
    },
    // 删除
    deleteOne: function (id) {
      let self = this
      let arr = []
      arr.push(id)
      let postData = arr
      window.myapi.quota_del(postData).then(function (res) {
        if (res.status === 200) {
          self.$Message.error('删除数据成功!')
          self.list()
        } else {
          self.$Message.error('删除数据失败!')
        }
      }).catch(function (e) {
        self.$Message.error('删除数据失败!')
      })
    },
    // 查询
    query: function (str) {
      this.queryStr = str
      this.pageIndex = 0
      this.list()
    }
  }
}

</script>
